<div class="group-by-wrapper">
	<div class="label">
		{{ 'REPORT_PAGE.GROUP_BY' | translate }}
	</div>
	<div>
		<nb-select [(ngModel)]="groupBy" (selectedChange)="groupByChange()" optionsListClass="nb-options">
			<nb-option value="date">
				{{ 'REPORT_PAGE.DATE' | translate }}
			</nb-option>
			<nb-option value="employee">
				{{ 'REPORT_PAGE.EMPLOYEE' | translate }}
			</nb-option>
			<nb-option value="project">
				{{ 'REPORT_PAGE.PROJECT' | translate }}
			</nb-option>
		</nb-select>
	</div>
</div>
<div
	class="weekly-logs row-table"
	[nbSpinner]="loading"
	nbSpinnerSize="giant"
	nbSpinnerStatus="primary"
>
	<ng-template #columnsHeader>
		<div class="columns-header">
			<div class="table-inner-wrapper font-weight-bold align-items-center">
				<div
					*ngIf="groupBy != 'date'"
					class="responsive-table-row employee-column"
				>
					{{ 'REPORT_PAGE.DATE' | translate }}
				</div>
				<div
					*ngIf="groupBy != 'employee'"
					class="responsive-table-row employee-column"
				>
					{{ 'REPORT_PAGE.EMPLOYEE' | translate }}
				</div>
				<div
					*ngIf="groupBy != 'project'"
					class="responsive-table-row project-column"
				>
					{{ 'REPORT_PAGE.PROJECT' | translate }}
				</div>
				<div
					class="responsive-table-row title-column">
					{{ 'REPORT_PAGE.TITLE' | translate }}
				</div>
				<div
					class="responsive-table-row duration-column"
				>
					{{ 'REPORT_PAGE.DURATION' | translate }}
				</div>
				<div class="responsive-table-row progress-bar-column"></div>
			</div>
		</div>
	</ng-template>
	<ng-template
		[ngIf]="dailyData?.length > 0"
		[ngIfElse]="notFound"
	>
		<nb-card
			[ngSwitch]="groupBy"
			class="card"
			*ngFor="let day of dailyData"
		>
			<ng-container *ngSwitchCase="'employee'">
				<ng-container
					*ngTemplateOutlet="
						groupByEmployeeCardEl;
						context: { $implicit: day }
					"
				></ng-container>
			</ng-container>
			<ng-container *ngSwitchCase="'project'">
				<ng-container
					*ngTemplateOutlet="
						groupByProjectCardEl;
						context: { $implicit: day }
					"
				></ng-container>
			</ng-container>
			<ng-container *ngSwitchDefault>
				<ng-container
					*ngTemplateOutlet="
						groupByDateCardEl;
						context: { $implicit: day }
					"
				></ng-container>
			</ng-container>
		</nb-card>
	</ng-template>
	<ng-template #notFound>
		<ngx-no-data-message
			[message]="'REPORT_PAGE.NO_DATA.APP_AND_URL_ACTIVITY' | translate"
		></ngx-no-data-message>
	</ng-template>
</div>

<ng-template let-day #groupByDateCardEl>
	<nb-card-header class="card-title">
		{{ day.date | dateFormat }}
	</nb-card-header>
	<nb-card-body class="activities-container">
		<ng-container *ngTemplateOutlet="columnsHeader"></ng-container>
		<div class="cart-body project-row" *ngFor="let employeeRow of day.employees; let employeeIndex = index">
			<div class="table-row-custom" *ngFor="let projectRow of employeeRow.projects;let projectIndex = index">
				<div class="activity-row" *ngFor="let activityRow of projectRow.activity;let activityIndex = index">
					<div class="table-inner-wrapper">
						<div class="responsive-table-row employee-column main-column-responsive" *ngIf="activityIndex == 0 && projectIndex == 0; else noColumn">
							<div class="responsive-table-header">{{ 'REPORT_PAGE.EMPLOYEE' | translate }}</div>
							<div class="responsive-table-content employee">
								<ng-container
									*ngTemplateOutlet="
									employeeEl;
									context: {$implicit: employeeRow?.employee}">
								</ng-container>
							</div>
						</div>
						<ng-template #noColumn>
							<div class="responsive-table-row employee-column no-height"></div>
						</ng-template>
						<div class="responsive-table-row project-column">
							<div class="responsive-table-header">{{ 'REPORT_PAGE.PROJECT' | translate }}</div>
							<div class="responsive-table-content project-name">
								<ng-template [ngIf]="activityIndex == 0">
									<ng-container
										*ngTemplateOutlet="
										projectEl;
										context: { $implicit: projectRow?.project }">
									</ng-container>
								</ng-template>
							</div>
						</div>
						<div class="responsive-table-row title-column">
							<div class="responsive-table-header">{{ 'REPORT_PAGE.TITLE' | translate }}</div>
							<div class="responsive-table-content project-name">
								{{ activityRow?.title }}
							</div>
						</div>
						<div class="responsive-table-row duration-column">
							<div class="responsive-table-header">{{ 'REPORT_PAGE.DURATION' | translate }}</div>
							<div class="responsive-table-content day-col">
								{{ activityRow.duration | durationFormat }}
							</div>
						</div>
						<div class="responsive-table-row progress-bar-column">
							<div class="responsive-table-content day-col">
								<ngx-progress-status
									[defaultStatus]="'success'"
									class="report-progress"
									[percentage]="activityRow.duration_percentage">
								</ngx-progress-status>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</nb-card-body>
</ng-template>

<ng-template let-employee #groupByEmployeeCardEl>
	<nb-card-header class="card-title">
		<ng-container
			*ngTemplateOutlet="
				employeeEl;
				context: { $implicit: employee?.employee }">
		</ng-container>
	</nb-card-header>
	<nb-card-body>
		<ng-container *ngTemplateOutlet="columnsHeader"></ng-container>
		<div class="cart-body project-row" *ngFor="let dateRow of employee.dates; let dateIndex = index">
			<div class="table-row-custom" *ngFor="let projectRow of dateRow.projects;let projectIndex = index">
				<div class="activity-row" *ngFor="let activityRow of projectRow.activity;let activityIndex = index">
					<div class="table-inner-wrapper">
						<div class="responsive-table-row employee-column main-column-responsive" *ngIf="projectIndex == 0 && activityIndex == 0; else noColumn">
							<div class="responsive-table-header">{{ 'REPORT_PAGE.DATE' | translate }}</div>
							<div class="responsive-table-content employee">
								{{ dateRow.date | dateFormat }}
							</div>
						</div>
						<ng-template #noColumn>
							<div class="responsive-table-row employee-column no-height"></div>
						</ng-template>
						<div class="responsive-table-row project-column">
							<div class="responsive-table-header">{{ 'REPORT_PAGE.PROJECT' | translate }}</div>
							<div class="responsive-table-content project-name">
								<ng-template [ngIf]="activityIndex == 0">
									<ng-container
											*ngTemplateOutlet="
											projectEl;
											context: { $implicit: projectRow?.project }">
									</ng-container>
								</ng-template>
							</div>
						</div>
						<div class="responsive-table-row title-column">
							<div class="responsive-table-header">{{ 'REPORT_PAGE.TITLE' | translate }}</div>
							<div class="responsive-table-content project-name">
								{{ activityRow?.title }}
							</div>
						</div>
						<div class="responsive-table-row duration-column">
							<div class="responsive-table-header">{{ 'REPORT_PAGE.DURATION' | translate }}</div>
							<div class="responsive-table-content day-col">
								{{ activityRow.duration | durationFormat }}
							</div>
						</div>
						<div class="responsive-table-row progress-bar-column">
							<div class="responsive-table-content day-col">
								<ngx-progress-status
										[defaultStatus]="'success'"
										class="report-progress"
										[percentage]="activityRow.duration_percentage">
								</ngx-progress-status>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</nb-card-body>
</ng-template>

<ng-template let-project #groupByProjectCardEl>
	<nb-card-header class="card-title">
		<ng-container
			*ngTemplateOutlet="
				projectEl;
				context: { $implicit: project?.project }">
		</ng-container>
	</nb-card-header>
	<nb-card-body>
		<ng-container *ngTemplateOutlet="columnsHeader"></ng-container>
		<div class="cart-body project-row" *ngFor="let dateRow of project.dates; let dateIndex = index">
			<div class="table-row-custom" *ngFor="let employeeRow of dateRow.employees;let employeeIndex = index">
				<div class="activity-row" *ngFor="let activityRow of employeeRow.activity;let activityIndex = index">
					<div class="table-inner-wrapper">
						<div class="responsive-table-row employee-column main-column-responsive" *ngIf="employeeIndex == 0 && activityIndex == 0; else noColumn">
							<div class="responsive-table-header">{{ 'REPORT_PAGE.DATE' | translate }}</div>
							<div class="responsive-table-content employee">
								{{ dateRow.date | dateFormat }}
							</div>
						</div>
						<ng-template #noColumn>
							<div class="responsive-table-row employee-column no-height"></div>
						</ng-template>
						<div class="responsive-table-row employee-column">
							<div class="responsive-table-header">{{ 'REPORT_PAGE.EMPLOYEE' | translate }}</div>
							<div class="responsive-table-content project-name">
								<ng-template [ngIf]="activityIndex == 0">
									<ng-container
											*ngTemplateOutlet="
													employeeEl;
													context: { $implicit: employeeRow?.employee }">
									</ng-container>
								</ng-template>
							</div>
						</div>
						<div class="responsive-table-row title-column">
							<div class="responsive-table-header">{{ 'REPORT_PAGE.TITLE' | translate }}</div>
							<div class="responsive-table-content project-name">
								{{ activityRow?.title }}
							</div>
						</div>
						<div class="responsive-table-row duration-column">
							<div class="responsive-table-header">{{ 'REPORT_PAGE.DURATION' | translate }}</div>
							<div class="responsive-table-content day-col">
								{{ activityRow.duration | durationFormat }}
							</div>
						</div>
						<div class="responsive-table-row progress-bar-column">
							<div class="responsive-table-content day-col">
								<ngx-progress-status
									[defaultStatus]="'success'"
									class="report-progress"
									[percentage]="activityRow.duration_percentage">
								</ngx-progress-status>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</nb-card-body>
</ng-template>

<ng-template let-project #projectEl>
	<ga-project-column-view
		*ngIf="project; else noProjects"
		[project]="project"
	></ga-project-column-view>
	<ng-template #noProjects>
		<span>{{ 'REPORT_PAGE.NO_PROJECT' | translate }}</span>
	</ng-template>
</ng-template>

<ng-template let-client #clientEl>
	<span *ngIf="client; else noClient">{{ client?.name }} </span>
	<ng-template #noClient>
		<span>{{ 'REPORT_PAGE.NO_CLIENT' | translate }}</span>
	</ng-template>
</ng-template>

<ng-template let-employee #employeeEl>
	<div class="avatar-wrapper-outer" *ngIf="employee; else noEmployee">
		<ngx-avatar
			class="report-table"
			*ngIf="employee"
			[src]="employee?.user?.imageUrl"
			[name]="employee?.user?.name"
			[id]="employee?.id">
		</ngx-avatar>
	</div>
	<ng-template #noEmployee>
		<span>{{ 'REPORT_PAGE.NO_EMPLOYEE' | translate }}</span>
	</ng-template>
</ng-template>
